import { PageContainer } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import { Button, Divider, message } from 'antd';
import { page, remove } from '@/services/system/role';
import { EditOutlined, DeleteOutlined, SafetyOutlined } from '@ant-design/icons';
import Confirm from '@/components/common/Confirm';
import { useState, useRef } from 'react';
import SystemRoleForm from './components/form';
import SystemRoleAuth from './components/auth';

const SystemRole = () => {

  const actionRef = useRef();
  const [formVisible, handleFormVisible] = useState(false);
  const [authVisible, handleAuthVisible] = useState(false);
  const [formValues, handleFormValues] = useState({});

  const handleDelete = (record) => {
    Confirm.delete({
      content: `<p>名称为 <span style="color: #f60"> ${record.name} </span> 的角色将被删除</p><p>是否继续？</p>`,
      confirm: () => {
        remove(record.id).then((data) => {
          if (data.success) {
            if (actionRef.current) actionRef.current.reload();
            message.success('删除成功!');
          } else {
            message.error('删除失败!');
          }
        });
      },
    });
  };
  
  const handleRaise = () => {
    handleFormValues({});
    handleFormVisible(true);
  }

  const handleModify = (record) => {
    handleFormValues(record);
    handleFormVisible(true);
  }

  const handleAuth = (record) => {
    handleFormValues(record);
    handleAuthVisible(true);
  }

  const columns = [
    { title: '角色名称', dataIndex: 'name', width: 300 },
    { title: '备注', dataIndex: 'remark' },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      width: 300,
      render: (_, record) => (
        <>
          <a onClick={() => { handleModify(record); }}> <EditOutlined/> 修改 </a>

          <Divider type="vertical" />
          <a onClick={() => { handleDelete(record) }}> <DeleteOutlined /> 删除 </a>

          <Divider type="vertical" />
          <a onClick={() => { handleAuth(record) }}> <SafetyOutlined /> 授权 </a>
        </>
      ),
    },
  ];

  return (
    <PageContainer>
      <ProTable
        headerTitle="角色信息查询列表"
        rowKey="id"
        actionRef={actionRef}
        toolBarRender={() => [
          <Button type="primary" onClick={() => { handleRaise(); }}> 新建 </Button>,
        ]}
        search={false}
        request={(params) => page(params)}
        columns={columns}
        pagination={{ pageSize: 10 }}
      />

      {
        formVisible &&
        <SystemRoleForm 
          onSubmit={() => {
            handleFormVisible(false);
            if (actionRef.current) actionRef.current.reload();
          }}
          onCancel={() => {
            handleFormVisible(false);
          }}
          formVisible={formVisible}
          values={formValues}
        />
      }

      {
        authVisible &&
        <SystemRoleAuth 
          visible={authVisible}
          values={formValues}
          onClose={() => {
            handleAuthVisible(false);
          }}
        />
      }
    </PageContainer>
  );
};

export default SystemRole;
